<template>
  <div>
    <!-- 面包屑 :separator-icon="ArrowRight"-->
    <el-breadcrumb>
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>账号列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 白色内容区域 -->
    <div class="page_content">
      <div class="flex">
        <div class="input_box">
          <el-input
            v-model="searchParams.query"
            placeholder="搜索关键字"
            class="input-with-select"
          >
            <template #append>
              <el-button @click="searchList"
                ><el-icon><Search /></el-icon
              ></el-button>
            </template>
          </el-input>
        </div>
        <el-button type="primary" @click="addUser">新建用户</el-button>
      </div>
      <!-- 表格 -->
      <!-- 
              el-table  的  data:要展示的数据数组
              el-table-column：列 prop每条数据的对应属性
                label：列标题
                scope.row:相当于一条数据
             -->
      <el-table :data="users" style="width: 100%">
        <el-table-column prop="username" label="姓名" width="180" />
        <el-table-column prop="email" label="邮箱" width="180" />
        <el-table-column prop="mobile" label="电话" />
        <el-table-column prop="role_name" label="角色" />
        <el-table-column prop="mg_state" label="状态">
          <!-- <template #default="scope">
            <el-switch
              v-model="scope.row.mg_state"
              @change="switchChange(scope.row)"
            />
          </template> -->
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="editRow(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" @click="deleteRow(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
        <!-- mg_state 状态 -->
      </el-table>
      <!-- 分页 -->
      <el-pagination
        v-model:currentPage="searchParams.pagenum"
        v-model:page-size="searchParams.pagesize"
        :page-sizes="[1, 3, 5, 10]"
        layout="total, sizes, prev, pager, next"
        :total="total"
        @size-change="searchList"
        @current-change="searchList"
      />
    </div>
    <!-- 新增弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="新建用户">
      <!-- 
                表单
                | username | 用户名称 | 不能为空 |
                | password | 用户密码 | 不能为空 |
                | email    | 邮箱     | 可以为空 |
                | mobile   | 手机号   | 可以为空 |
             -->
      <el-form ref="userForm" :model="formData" :rules="rules">
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="formData.username" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input
            type="password"
            v-model="formData.password"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入用户邮箱" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="formData.mobile" placeholder="请输入用户手机号" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="flex">
          <el-button>取消</el-button>
          <el-button type="primary" @click="submitForm(userForm)"
            >确定</el-button
          >
        </div>
      </template>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog v-model="dialogFormEVisible" title="编辑用户">
      <!-- 
                表单 
                | email    | 邮箱     | 可以为空 |
                | mobile   | 手机号   | 可以为空 |
             -->
      <el-form ref="userForm2" :model="formData2" :rules="rules2">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData2.email" placeholder="请输入用户邮箱" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="formData2.mobile" placeholder="请输入用户手机号" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="flex">
          <el-button>取消</el-button>
          <el-button type="primary" @click="submitEForm(userForm2)"
            >确定</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { toRefs, reactive, ref } from "vue";
// import { ArrowRight } from "@element-plus/icons-vue";
export default {
  name: "userList",
  setup() {
    const data = reactive({
      searchParams: {
        query: "",
        pagesize: 5,
        pagenum: 1,
      },
      total: 0,
      userList: [
        {
          username: "谭梦寻",
          email: "1232412@qq.com",
          mobile: "123123312312",
          role_name: "管理员",
          mg_state: "正常",
          id: 0,
        },
        {
          username: "江青影",
          email: "123242312@qq.com",
          mobile: "12312331231",
          role_name: "用户",
          mg_state: "正常",
          id: 1,
        },
        {
          username: "诸葛亮",
          email: "1232122@qq.com",
          mobile: "12312331231",
          role_name: "用户",
          mg_state: "正常",
          id: 2,
        },
        {
          username: "刘伯温",
          email: "1231232@qq.com",
          mobile: "12312331231",
          role_name: "用户",
          mg_state: "正常",
          id: 3,
        },
        {
          username: "张角",
          email: "1231232@qq.com",
          mobile: "13344431323",
          role_name: "用户",
          mg_state: "正常",
          id: 4,
        },
        {
          username: "刘备",
          email: "1231232@qq.com",
          mobile: "13344434343",
          role_name: "用户",
          mg_state: "正常",
          id: 5,
        },
        {
          username: "关羽",
          email: "1231232@qq.com",
          mobile: "12542331231",
          role_name: "用户",
          mg_state: "正常",
          id: 6,
        },
        {
          username: "曹操",
          email: "1231232@qq.com",
          mobile: "15678331231",
          role_name: "用户",
          mg_state: "正常",
          id: 7,
        },
      ],
      users: [],
      dialogFormVisible: false,
      dialogFormEVisible: false,
      formData: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      formData2: {
        id: "",
        email: "",
        mobile: "",
      },
      rules: {
        username: [{ required: true, message: "此项为必填", trigger: "blur" }],

        password: [{ required: true, message: "此项为必填", trigger: "blur" }],
        email: [
          {
            required: false,
            pattern:
              /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "请填写正确邮箱",
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: false,
            pattern: /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/,
            message: "请填写正确手机号",
            trigger: "blur",
          },
        ],
      },
      rules2: {
        email: [
          {
            required: false,
            pattern:
              /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "请填写正确邮箱",
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: false,
            pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
            message: "请填写正确手机号",
            trigger: "blur",
          },
        ],
      },
    });
    const searchList = () => {
      // 使用正则表达式进行模糊查询
      const searchTerm = data.searchParams.query;
      const regex = new RegExp(searchTerm, "gi");
      console.log(data.searchParams);
      data.users = data.userList;
      data.users = data.users.filter((item) => regex.test(item.username));
      let len = data.users.length;
      let num = len - data.searchParams.pagesize;
      // 获取到的数组长度大于页面展示的长度
      if (num > 0 && data.searchParams.pagenum === 1) {
        console.log("展示首页内容！");
        data.users.splice(data.searchParams.pagesize, num);
      } else if (num > 0 && data.searchParams.pagenum !== 1) {
        console.log("展示后面的内容！");
        console.log(
          "前面要删除的数目：" +
            (data.searchParams.pagenum - 1) * data.searchParams.pagesize
        );
        data.users.splice(
          0,
          (data.searchParams.pagenum - 1) * data.searchParams.pagesize
        );
        // 二次截断
        let len2 = data.users.length;
        data.users.splice(
          data.searchParams.pagesize,
          len2 - data.searchParams.pagesize
        );
      }
      data.total = len;
    };
    const addUser = () => {
      data.dialogFormVisible = true;
    };
    // 新增提交
    const submitForm = (formEl) => {
      // validate
      formEl.validate((res) => {
        if (!res) {
          return;
        }
        // 表单通过对象形式新增到数组中
        // data.userList.push(data.formData);
        data.users.push(data.formData);
        // 隐藏弹窗
        data.dialogFormVisible = false;
        // 清空form
        data.formData = {
          username: "",
          password: "",
          email: "",
          mobile: "",
        };
      });
    };
    // 修改提交
    const submitEForm = (formEl) => {
      formEl.validate((res) => {
        if (!res) {
          return;
        }
        // 提交修改
        console.log(data.formData2);
        data.users[data.formData2.id].email = data.formData2.email;
        data.users[data.formData2.id].mobile = data.formData2.mobile;
        data.dialogFormEVisible = false;
        searchList();
      });
    };
    // 状态更改
    const switchChange = (row) => {
      console.log("操作的那条数据", row);
      if (row) {
        searchList();
      }
    };
    // 数据编辑
    const editRow = (row) => {
      console.log("编辑的那条数据", row);
      const { email, mobile, id } = row;
      // 展示编辑表单
      data.dialogFormEVisible = true;
      data.formData2.email = email;
      data.formData2.mobile = mobile;
      data.formData2.id = id;
    };
    // 删除数据
    const deleteRow = (row) => {
      console.log("删除的那条数据", row);
      let i = 0;
      console.log(row.email);
      for (i; i < data.users.length; i++) {
        if (data.users[i].email === row.email) {
          data.users.splice(i, 1);
        }
      }
      console.log(data.users);
    };

    // 方法初始化
    searchList();
    const userForm = ref();
    const userForm2 = ref();
    return {
      ...toRefs(data),
      searchList,
      addUser,
      submitForm,
      submitEForm,
      userForm,
      userForm2,
      // switchChange,
      editRow,
      deleteRow,
    };
  },
};
</script>
<style scoped>
.input_box {
  width: 200px;
  margin-right: 15px;
}
</style>
